<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>正在播放 - 晴天 - 声破天</title>
    <link rel="stylesheet" href="assets/css/main.css">
    <link rel="stylesheet" href="assets/css/player-bar.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="assets/css/player.css">
</head>
<body>
    <div class="main-container">
        <!-- 动态背景 -->
        <div class="dynamic-bg"></div>

        <!-- 主内容区 -->
        <main class="content">
            <!-- 顶部导航栏 -->
            <div class="content-container">
                <div class="lyrics-page">
                    <!-- 歌曲信息头部 -->
                    <div class="lyrics-header">
                        <div class="album-cover">
                            <img src="assets/images/covers/cover2.jpg" alt="晴天专辑封面">
                        </div>
                        <div class="song-info">
                            <h1>晴天</h1>
                            <h2>周杰伦</h2>
                            <p class="album-name">专辑：叶惠美</p>
                        </div>
                    </div>
                    
                    <!-- 歌词主体部分 -->
                    <div class="lyrics-main">
                        <div class="scroll-hint-container">
                            ⬆️ 点击歌词可跳转到对应位置 ⬇️
                        </div>
                        <div class="lyrics-container">
                            <div class="lyrics">
                                <!-- 歌词将由JavaScript动态加载 -->
                                <p class="lyric-line">正在加载歌词...</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- 底部播放器 -->
    <footer class="player-bar">
        <div class="now-playing">
            <div class="track-info">
                <div class="track-image" title="返回上一页">
                    <img src="assets/images/covers/cover2.jpg" alt="当前播放歌曲">
                </div>
                <div class="track-details">
                    <h4 class="track-name">晴天</h4>
                    <p class="artist-name">周杰伦 - 叶惠美</p>
                </div>
            </div>
            <div class="track-actions">
                <button class="action-btn"><i class="far fa-heart"></i></button>
                <button class="action-btn"><i class="fas fa-external-link-alt"></i></button>
            </div>
        </div>

        <div class="player-controls">
            <div class="control-buttons">
                <button class="control-btn"><i class="fas fa-random"></i></button>
                <button class="control-btn"><i class="fas fa-step-backward"></i></button>
                <button class="control-btn play-btn"><i class="fas fa-play"></i></button>
                <button class="control-btn"><i class="fas fa-step-forward"></i></button>
                <button class="control-btn"><i class="fas fa-redo"></i></button>
            </div>
            <div class="playback-bar">
                <span class="current-time">0:00</span>
                <div class="progress-bar">
                    <div class="progress"></div>
                    <div class="progress-handle"></div>
                </div>
                <span class="total-time">4:29</span>
            </div>
        </div>

        <div class="player-options">
            <button class="option-btn"><i class="fas fa-list"></i></button>
            <button class="option-btn"><i class="fas fa-desktop"></i></button>
            <div class="volume-control">
                <button class="option-btn"><i class="fas fa-volume-up"></i></button>
                <div class="volume-bar">
                    <div class="volume-level" style="width: 70%"></div>
                    <div class="volume-handle" style="left: 70%"></div>
                </div>
            </div>
        </div>
    </footer>

    <script src="assets/js/i18n.js"></script>
    <script src="assets/js/app.js"></script>
    <script src="assets/js/player.js"></script>
    <script>
        // 确保音频播放的连贯性
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化URL参数处理
            const urlParams = new URLSearchParams(window.location.search);
            const startTime = urlParams.get('time');
            
            // 如果有音频播放器实例和起始时间参数
            if (window.audioPlayer && startTime) {
                // 设置播放时间
                window.audioPlayer.currentTime = parseFloat(startTime);
                
                // 如果之前在其他页面是在播放状态，继续播放
                if (localStorage.getItem('wasPlaying') === 'true') {
                    window.audioPlayer.play().catch(e => console.log('自动播放失败，需要用户交互'));
                    updatePlayButton(true);
                }
            }
        });
    </script>
</body>
</html>